<!--
  * 门店充值
  *
-->
<template>
  <a-modal :open="visible" title="门店充值" ok-text="确认" cancel-text="取消" @ok="updatePwd" @cancel="cancelModal">
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
      <a-form-item label="充值金额" name="money">
        <a-input-number placeholder="请输入充值金额" v-model:value="form.money" :min="0" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup lang="ts">
import { message } from 'ant-design-vue'
import { storeApi } from '@/api/business/data/store-api'
import { useLoadingStore } from '@/store/modules/loading-store'
import { errorSentry } from '@/lib/error-sentry'
const loadingStore = useLoadingStore()

// emit
const emit = defineEmits(['reloadList'])

const visible = ref(false)
const formRef = ref()

const rules = {
  money: [{ required: true, message: '请输入充值金额', trigger: 'blur' }]
}

const formDefault = {
  id: '',
  money: ''
}
let form = reactive({
  ...formDefault
})

async function updatePwd() {
  formRef.value
    .validate()
    .then(async () => {
      loadingStore.show()
      try {
        const res = await storeApi.rechargeStore(form)
        message.success(res.msg)
        visible.value = false
        emit('reloadList')
      } catch (error) {
        message.error(error.msg)
        errorSentry.captureError(error)
      } finally {
        loadingStore.hide()
      }
    })
    .catch((error) => {
      console.log('error', error)
      message.error('参数验证错误，请仔细填写表单数据!')
    })
}

function showModal(data) {
  form.id = data
  console.log(data)
  visible.value = true
  form.money = ''
}

function cancelModal() {
  visible.value = false
}

defineExpose({ showModal })
</script>
